<template>
    <div class="wrap_upload">
        <el-button type="primary" size="large" @click="dialogTableVisible = true">
            <i class="el-icon-upload"></i> 物料上传
        </el-button>
        <!--弹出层-->
        <el-dialog title="Upload File" :visible.sync="dialogTableVisible" size="large">
            <!--文件上传-->
            <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :data='uploadObj' :on-change="onChange" :on-success="handleSuccess" :before-upload="beforeUpload" :on-progress='showProgress' :on-error='handleError' :auto-upload="false" :show-file-list="false">
                <el-button slot="trigger" type="primary">
                    <i class="icon-ddex-file"></i> 选择文件
                </el-button>
                <el-button @click="submitUpload">
                    <i class="icon-ddex-upload-file2"></i> 上传文件
                </el-button>
            </el-upload>
            <el-table :data="fileList" stripe style="margin-top: 10px;">
                <el-table-column property="filename" label="文件名" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column property="size" label="大小" width="100" align="center"></el-table-column>
                <el-table-column property="uploadstatus" label="上传状态" align="center">
                    <template scope="scope">
                        <el-progress :percentage="uploadpercent" v-show="waitUpload||uploading" status="success"></el-progress>
                        <span v-show="waitUpload">等待上传0%</span>
                        <span v-show="uploading">已上传{{uploadpercent}}%</span>
                        <span v-show="failUpload" class="el-icon-circle-close" style="color: #fb2b2b;">上传失败：请重新上传该文件！</span>
                        <span v-show="successUpload"><i class="el-icon-circle-check" style="color: #6fd273"></i>上传成功</span>
                    </template>
                </el-table-column>
                <el-table-column property="sacnstatus" label="扫描状态" align="center">
                </el-table-column>
                <el-table-column property="operation" label="操作" align="center">
                    <template scope="scope">
                        <el-button type="primary">
                            <i class="icon-ddex-Verification"></i> 进行人工检核
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" style="float: right;height:40px;margin-top: 10px;margin-right: 20px;">
                <i class="icon-ddex-Verification"></i> 人工检核全部
            </el-button>
        </el-dialog>
        <div class="table" :span="24">
            <el-button size="large" class="btn">
                <i class="icon-ddex-History"></i> 物料上传历史记录
            </el-button>
            <!--表单-->
            <el-form class="form" ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item label="上传时间:">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="上传者:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <!--表格-->
            <el-table :data="tableData" stripe style="width: 100%;height: 400px;">
                <el-table-column prop="materianum" label="物料序号" width="120" align="center" sortable="true">
                </el-table-column>
                <el-table-column prop="foldername" label="物料文件夹名称" width="200" align="center">
                </el-table-column>
                <el-table-column prop="uploader" label="上传者" width="100" align="center">
                </el-table-column>
                <el-table-column prop="uploadtime" label="物料上传时间" sortable="true" width="190" align="center">
                </el-table-column>
                <el-table-column prop="uploadstatus" label="上传状态" width="100" align="center">
                </el-table-column>
                <el-table-column prop="scanstatus" label="扫描状态" width="100" align="center">
                </el-table-column>
                <el-table-column prop="verificationstatus" label="人工核验状态" width="140" align="center">
                </el-table-column>
                <el-table-column prop="other" label="其它字段或用途" align="center" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <!--进度条-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="this.tableData.length">
            </el-pagination>
        </div>
    </div>
</template>


<script>
//import MaterialDialog from './material_dialog.vue'
export default {
    components: {
        //MaterialDialog,
    },
    data() {
        return {
            dialogTableVisible: false,
            form: {
                date1: '',
                data2: '',
                name: '',
            },
            gridData: [{
                    "filename": "SRC-N-江湖道-Kay-0622.zip",
                    "size": "50M",
                    "uploadstatus": "上传成功",
                    "sacnstatus": "扫描成功",
                },
                {
                    "filename": "SRC-N-江湖道-Kay-0622.zip",
                    "size": "50M",
                    "uploadstatus": "上传成功",
                    "sacnstatus": "扫描成功",
                },
                {
                    "filename": "SRC-N-江湖道-Kay-0622.zip",
                    "size": "50M",
                    "uploadstatus": "上传成功",
                    "sacnstatus": "扫描成功",
                },
                {
                    "filename": "SRC-N-江湖道-Kay-0622.zip",
                    "size": "50M",
                    "uploadstatus": "上传成功",
                    "sacnstatus": "扫描成功",
                }

            ],
            tableData: [{
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                },
                {
                    "materianum": 101,
                    "foldername": "SRC-N-江湖道-Kay-0615",
                    "uploader": "kiki",
                    "uploadtime": "2017-06-15  11:45",
                    "uploadstatus": "上传成功",
                    "scanstatus": "扫描成功",
                    "verificationstatus": "未核验",
                    "other": "",
                }
            ],
            currentPage: 4,
            uploadpercent: 0,
            waitUpload: false,
            uploading: false,
            failUpload: false,
            successUpload: false,
            fileList: [{
                    "filename": "SRC-N-江湖道-Kay-0622.zip",
                    "size": "50M",
                    "uploadstatus": "上传成功",
                    "sacnstatus": "扫描成功",
                },
                {
                    "filename": "SRC-N-江湖道-Kay-0622.zip",
                    "size": "50M",
                    "uploadstatus": "上传成功",
                    "sacnstatus": "扫描成功",
                }
            ],
            uploadObj: {
                type: '',
                subtype: '',
                file: null
            }
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        onChange(file, fileList) {
            console.log(file);
            if (file.status === "ready") {
                this.waitUpload = true;
                this.fileList.push({
                    "filename": file.name,
                    "size": `${parseInt(file.size/1024)}kb`,
                });
            }
        },
        beforeUpload(file, fileList) {
            this.waitUpload = false;
            this.uploading = true;
        },
        showProgress(event, file, fileList) {
            this.uploadpercent = event.percent
        },
        handleSuccess(file, fileList) {
            this.successUpload = true;
            this.uploading = false;
        },
        handleError(file, fileList) {
            this.uploading = false;
            this.failUpload = true;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
}
</script>
<style scoped lang="less" rel="stylesheet/less">
.wrap_upload {
    height: 98%;
    overflow: auto;
    .table {
        margin-top:10px;
        padding: 20px 20px 10px 40px;
        background-color: #fff;
        .btn {
            float: left;
            color: #0aa4f6;
            border-color: #0aa4f6;
            margin-right: 100px;
        }
        .form {
            float: left;
            .line {
                text-align: center;
            }
        }
        .el-pagination {
            float: right;
            margin: 20px 0;
        }
    }
}
</style>